<script setup lang='ts'>
defineOptions({ name: 'AppSportsBetSlipCenter' })

const sportStore = useSportsStore()

const showBetSlip = ref(false)

const betCount = computed(() => {
  return sportStore.cart.count
})

// 打开投注单
function openBetSlip() {
  showBetSlip.value = true
}
</script>

<template>
  <div class="app-sports-bet-slip-center">
    <div class="top-0 left-0 right-0 absolute overflow-hidden" style="bottom:56px;">
      <div class="right-0 box-border bottom-0 mx-[4px] absolute" style="width:calc(100% - 8px);">
        <!-- 球 -->
        <Transition name="ball-scale">
          <div v-if="!showBetSlip" @click="openBetSlip"
            class="z-[101] absolute left-[50%] bottom-[16px] ml-[-29px] pointer-events-auto">
            <div class="w-[58px] h-[58px] rounded-[50%]" style="box-shadow: var(--tg-sports-bet-slip-box-shadow);">
              <div
                class="text-[32px] w-full h-full flex items-center justify-center cursor-pointer bg-[#24ee89] rounded-[50%]">
                <BaseIcon name="sports-bets" style="--tg-base-icon-color:#000;" />
                <Transition name="fade">
                  <AppSportsBetSlipHeaderTotal v-show="betCount > 0" class="absolute top-[-2px] left-[40px]"
                    :num="betCount" />
                </Transition>
              </div>
            </div>
          </div>
        </Transition>

        <!-- 投注单 -->
        <AppSportsBetSlip v-model:show="showBetSlip" />
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.app-sports-bet-slip-center {
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  position: fixed;
  pointer-events: none;
  z-index: 100;
}

// 球的出现和隐藏
.ball-scale-enter-active,
.ball-scale-leave-active {
  transition: all 300ms ease-in-out;
  transform-origin: center 130%;
}

.ball-scale-enter-from,
.ball-scale-leave-to {
  transform: scale(0) translateY(116px);
}

// 数字从0-1出现和隐藏
.fade-enter-active,
.fade-leave-active {
  transition: opacity 600ms ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
